<!-- 分配角色 -->
<template>
  <div class="assignroles">
    <div class="cation-icon">
      <i class="iconfont">&#xe7d8;</i>
      <span>{{this.name}}用户角色分配</span>
    </div>
    <!-- 所有角色 -->
    <div class="roles">
      <p>下面是所有角色，请勾选要分配给用户的角色</p>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckAllChange">
        <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="roles_submit">
      <el-button type="primary" icon="el-icon-upload2" size="small" @click="submitForm()">提交</el-button>
      <el-button icon="el-icon-back" size="small" @click="resetForm()">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      checkedCities: [],
      cities: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    submitForm() {
      var assignment = {
        id: this.$route.query.id,
        ids: this.checkedCities
      };
      this.$store
        .dispatch("Roleassignment", assignment)
        .then(data => {
          this.$notify({
            title: "角色分配成功",
            type: "success"
          });
          this.$router.replace({ name: "permission" });
        })
        .catch(error => {
          this.$notify.error({
            title: "角色分配失败",
            message: `${error}`
          });
        });
    },
    // 绑定值发生变化
    handleCheckAllChange(val) {
      console.log(JSON.stringify(val));
      this.checkedCities = val;
    },
    resetForm() {
      this.$router.replace({ name: "permission" });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    var rolest = {
      id: this.$route.query.id
    };
    this.$store.dispatch("Character", rolest).then(data => {
      this.cities = data;
    });
    // 默认选中已有的角色
    var rolelist = {
      id: this.$route.query.id
    };
    this.$store.dispatch("GetRoleList", rolelist).then(data => {
      let worder = data;
      let idg;
      worder.forEach(element => {
        idg = element.id;
        this.checkedCities.push(idg);
      });
    });
  },
  mounted() {}
};
</script>
<style scoped>
.cation-icon {
  height: 50px;
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #eeeeee;
}
.cation-icon span {
  font-size: 14px;
}
.iconfont {
  margin-left: 15px;
  margin-right: 5px;
  font-size: 18px;
}
.roles {
  margin: 10px;
}
.roles p {
  font-size: 12px;
  color: #4cb9e3;
  margin-bottom: 10px;
}
.roles_submit {
  margin-left: 10px;
}
</style>